<?php
/* @var $this DefaultController */

$this->breadcrumbs=array(
	$this->module->id,
);

$urlPhoto = array('/marcar/default/getphoto','format'=>'png');
$urlConfirm = array ('/marcar/default/confirm');
$htmlDataConfirm = array('success'=>'js:finalizado', 'type'=>'post', 'data'=>array('user_id'=>'js:user_id', 'tipo_marcacion'=>'js:tipo_marcacion'));
$url = array(
	'facial'=>CHtml::normalizeUrl(array_merge($urlPhoto, array('option'=>'facial'))),
	'qr'=>CHtml::normalizeUrl(array_merge($urlPhoto, array('option'=>'qr'))),
	'yes'=>CHtml::normalizeUrl(array_merge($urlConfirm, array('confirm'=>'yes'))),
	'no'=>CHtml::normalizeUrl(array_merge($urlConfirm, array('confirm'=>'no'))),
	);
$modo = array(
	'facial'=>array(
		'url'=>$url['facial'],
		'select_button'=>CHtml::button('Reconocimiento Facial', array('onclick'=>'take_snapshot("facial");')),
		),
	'qr'=>array(
		'url'=>$url['qr'],
		'select_button'=>CHtml::button('Usar tarjeta QR', array('onclick'=>'take_snapshot("qr");')),
		),
	'cancelar_button'=>CHtml::button('Cancelar', array('onclick'=>'finalizado("Cancelado.")')),
	'entrada_button'=>CHtml::ajaxButton('Entrada', $url['yes'], $htmlDataConfirm, array('onclick'=>'definir_tipo_marcacion("entrada")')),
	'salida_button'=>CHtml::ajaxButton('Salida', $url['yes'], $htmlDataConfirm, array('onclick'=>'definir_tipo_marcacion("salida")')),
	'yes_button'=>CHtml::button('Sí', array('onclick'=>'menu_tipo_marcacion()')),
	//'no_button'=>CHtml::ajaxButton('No', $url['no'], array('success'=>'js:finalizado')),
	'no_button'=>CHtml::button('No', array('onclick'=>'finalizado("Cancelado.")')),
	);
?>

<div id="mensaje"></div>

<h1>Marcar Asistencia</h1>

<div id="my_camera" style="width:320px; height:240px; margin: 40px auto;"></div>
<div id="my_photo" style="width:320px; height:240px; margin: 40px auto;"></div>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		image_format: 'png',
		jpeg_quality: 90
	});
	Webcam.attach( '#my_camera' );

	var modo = <?php echo CJSON::encode($modo);?>;
	var urls = <?php echo CJSON::encode($url);?>;
	var user_id;
	var tipo_marcacion;
	var answerTimeout;
	var mensajeTimeout;
</script>

<table width="100%" style="table-layout: fixed;">
	<col width=width="(100/x)%">
	<col width=width="(100/x)%">
	<col width=width="(100/x)%">
	<tr>
		<td><div align="center" id="b_izq"></div></td>
		<td><div align="center" id="pregunta"></div></td>
		<td><div align="center" id="b_der"></div></td>
	</tr>
</table>

<script language="JavaScript">
	function set_default_buttons() {
		$('#b_izq').html(modo['facial']['select_button']);
		$('#b_der').html(modo['qr']['select_button']);
		show_camera();
		user_id = null;
		tipo_marcacion = null;
	}
	function set_tipo_marcacion_buttons() {
		clearTimeout(answerTimeout);
		$('#b_izq').html(modo['entrada_button']);
		$('#b_der').html(modo['salida_button']);
		set_pregunta(modo['cancelar_button']);
	}
	function set_confirm_buttons() {
		clearTimeout(answerTimeout);
		$('#b_izq').html(modo['yes_button']);
		$('#b_der').html(modo['no_button']);
	}

	function show_camera() {
		$('#my_camera').show();
		$('#my_photo').hide();
	}
	function show_photo(data_uri) {
		var photo = $('#my_photo');
		$('#my_camera').hide();
		photo.html('<img src="'+data_uri+'"/>');
		photo.show();
	}

	function take_snapshot(type) {
		// take snapshot and get image data
		var data_uri = Webcam.snap();
		var url = modo[type]['url'];
		$('#b_izq').hide();
		$('#b_der').hide();
		set_pregunta('Procesando...')
		show_photo(data_uri);
		Webcam.upload(data_uri, url, get_answer);
	}

	function set_mensaje (type,message) {
		clearTimeout(mensajeTimeout);
		var msg = $('#mensaje');
		msg.hide();
		msg.html('<div class=flash-'+type+'>'+message+'</div>');
		msg.fadeIn();
	}

	function set_pregunta (message) {
		$('#pregunta').html(message);
	}

	function get_answer(code,text) {
		var answer;
		text = JSON.parse(text);
		$('#b_izq').show();
		$('#b_der').show();
		if (text.error)
		{
			answer = 'Falló la identificación.';
			set_mensaje('error',text.details);
			finalizado(answer);
		}
		else
		{
			user_id = text.user_id;
			answer = '¿Es usted <strong>' + text.fullname + '</strong>?';
			set_pregunta(answer);
			set_confirm_buttons();
			set_mensaje('success',text.details);
		}
	}

	function menu_tipo_marcacion() {
		set_tipo_marcacion_buttons();
	}

	function definir_tipo_marcacion(tipo) {
		tipo_marcacion = tipo;
	}

	function finalizado(message) {
		set_pregunta(message);
		set_default_buttons();
		//answerTimeout = setTimeout(function() {set_pregunta('');}, 3000);
		//mensajeTimeout = setTimeout(function() {$('#mensaje').hide();}, 3000);
	}

	set_default_buttons();
</script>